<template>
  <div class="mod-playlist-tag clearfix">
    <template v-for="(item, index) of TagCategory.data" :key="index">
      <div class="playlist-tag-filter">
        <TagItem
          :data="item"
          :liId="index"
          :TagCategory="TagCategory"
          @tagClick="tagClick"
        ></TagItem>
      </div>
    </template>
  </div>
</template>

<script>
import { toRefs, reactive } from "vue";
import TagItem from "./item";
export default {
  name: "PlayListTags",
  components: {
    TagItem,
  },
  props: {
    TagCategory: Object,
  },
  emits: ["tagClick"],
  setup(props, { emit }) {
    const state = reactive({});

    const tagClick = (item) => {
      emit("tagClick", item);
    };
    return {
      ...toRefs(state),
      tagClick,
    };
  },
};
</script>

<style lang='scss' scoped>
.mod-playlist-tag {
  padding: 30px 0;
  .playlist-tag-filter {
    float: left;
    width: 20%;
    padding: 0;
    position: static;
    border-right: 1px solid #ebebeb;
    box-sizing: border-box;
  }
}
</style>
